<template>
	<view>
		<NavBar title="换领登记" backTo="prev"></NavBar>
		<img src="http://cdn.henrywong01.top/gift/giftPoster_new.jpeg" class="poster" :style="{marginTop:navBarHeight+'px'}"/>
		<view class="header">精选美容疗程体验</view>
		<view class="giftCodeWrap" @click = "handleGiftCodeBtn">
			<view class="tip">换领编号：</view>
			<view class="code"> {{redeemCode}} </view> 
			<view class="btn" :style="{display: (redeemCode == '***' ? 'true' : 'false')}">点击查看编号</view>
		</view>
		<view class="missionWrap">
			<view class="h1">
			    礼品换领方法
			</view>
			<view class="h2">【高端奢养疗程体验】</view>
			<view class="step" :style="{marginTop:'10px'}">
			    礼品换领方法步骤:
			</view>
			<view class="step" :style="{marginTop:'5px'}">
			    1.点击本页面的“查看编号按钮”
			</view>
			<view class="step" :style="{marginTop:'5px'}">
			    2.在小程序上预约疗程
			</view>
			<view class="step" :style="{marginTop:'5px'}">
			    3.前往门店前台通过换领编号获取礼品
			</view>
			<view class="present" :style="{marginTop:'5px'}">
			    · SPL深层净澈头皮疗程
			</view>
			<view class="present" :style="{marginTop:'5px'}">
				· 高端气垫护发梳一套
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import {Request, getGlobalData} from '@/util.js';
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	export default {
		components:{
			NavBar
		},
		data(){
			return {
				navBarHeight: uni.getStorageSync('navBarHeight'),
				redeemCode: "***",
			}
		},
		methods:{
			handleGiftCodeBtn(){
				Request(domain+"/client/gift/getRedeemCode",{openid:openid}).then((res)=>{
					 let {redeemCode} = res.data.data;
					 this.redeemCode = redeemCode;
					 
				})
			}
		}
	}
</script>

<style lang="less">
	@import "../../uni.less";
	page{
	    background-color: @background_color;
	    padding-bottom: 100rpx;

	}
</style>

<style lang="less">
	
	.poster{
	    width:100%;
	    height: 900rpx;
	}
	
	.header{
	    margin-top: 10rpx;
	    text-align: center;
	    font-weight: 500;
	    color: #6A3E3e;
	    font-size: 40rpx;
	}
	
	.giftCodeWrap{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    margin-top: 20rpx;
	    height: 50rpx;
	    .tip{
	        color:#4d4d4d;
	        text-align: center;
	        font-size: 28rpx;
	    }
	
	    .code{
	        color:#D1A8A8;
	        margin-right:10rpx;
	    }
	
	    .btn{
	        width: 170rpx;
	        color:#fff;
	        background-color: #c9aaa8;
	        text-align: center;
	        border-radius: 25rpx;
	        font-size: 20rpx;
	        line-height: 40rpx;
	        height: 40rpx;
	        margin-left: 10rpx;
	    }
	}
	
	.missionWrap{
	    width: 90%;
	    height:490rpx;
	    background-color: #fff;
	    margin: 0 auto;
	    margin-top:50rpx;
	    border-radius: 20rpx;
	    .h1{
	        position: relative;
	        text-align: center;
	        color:#D1A8A8;
	        font-size: 36rpx;
	        font-weight: 500;
	        padding-top:29rpx;
	        padding-bottom: 10rpx;
	       
	    }
	    .h2{
	        color:#4d4d4d;
	        font-size: 29rpx;
	        text-align: center;
	    }
	
	    .step{
	        color:#4d4d4d;
	        width:80%;
	        margin: 0 auto;
	        font-size: 29rpx;
	    }
	
	    .present{
	        width:80%;
	        margin: 0 auto;
	        font-size: 29rpx;
	        color:#D1A8A8;
	    }
	
	}
</style>